<template>
	<div class="main-container">
		<!-- 顶部用户信息栏 -->
		<div class="user-info-bar">
			<!-- 使用全局头像组件 -->
			<UserAvatar />
			<div class="user-details">
				<span class="user-name">{{ $store.getters['user/nickname'] }}</span>
				<span class="user-sect">{{ ($store.getters['user/sectInfo'] && $store.getters['user/sectInfo'].sectName) || '无门派' }}</span>
			</div>
			<!-- 货币显示 -->
			<div class="currency-display">
				<div class="currency-item">
					<div class="currency-icon coin1">
						<span class="icon-text">银</span>
					</div>
					<span class="currency-value">{{ $store.getters['items/coin'] }}</span>
				</div>
				<div class="currency-item">
					<div class="currency-icon coin2">
						<span class="icon-text">金</span>
					</div>
					<span class="currency-value">{{ $store.getters['items/goldCoin'] }}</span>
				</div>
			</div>
			<div class="user-level">
				<span class="level-text">Lv.{{ $store.getters['user/level'] }}</span>
				<span class="realm-text">{{ $store.getters['user/realmName'] || '初学乍练' }}</span>
			</div>
		</div>
		
		<!-- 主游戏区域 -->
		<div class="main-game-area">
			<!-- 左侧功能菜单 -->
			<div class="left-menu">
				<div class="menu-item" @click="navigateTo('/pages/battle/index')">
					<div class="menu-icon battle">
						<span class="icon-text">战</span>
					</div>
					<span class="menu-label">战斗</span>
				</div>
				<div class="menu-item" @click="navigateTo('/pages/attribute/attribute')">
					<div class="menu-icon attr">
						<span class="icon-text">属</span>
					</div>
					<span class="menu-label">属性</span>
				</div>
				<div class="menu-item" @click="navigateTo('/pages/equipment/forge')">
					<div class="menu-icon forge">
						<span class="icon-text">造</span>
					</div>
					<span class="menu-label">打造</span>
				</div>
				<div class="menu-item" @click="navigateTo('/pages/sect/index')">
					<div class="menu-icon sect">
						<span class="icon-text">门</span>
					</div>
					<span class="menu-label">门派</span>
				</div>
			</div>
			
			<!-- 中央人物展示区域 -->
			<div class="character-display">
				<div class="character-background">
					<!-- 人物背景图将通过CSS设置 -->
				</div>
				
				<!-- 人物详细信息面板 -->
				<div class="character-detail-panel" v-if="showDetailPanel">
					<div class="panel-header">
						<h3>人物信息</h3>
						<button class="close-btn" @click="showDetailPanel = false">×</button>
					</div>
					<div class="panel-content">
						<!-- 优化后的基本信息展示 -->
						<div class="basic-info">
							<!-- 等级和境界信息区域 -->
							<div class="level-realm-section">
								<div class="user-level">
									<span class="level-text">Lv.{{ $store.getters['user/level'] }}</span>
									<span class="realm-text">{{ $store.getters['user/realmName'] || '初学乍练' }}</span>
								</div>
								<div class="realm-desc" v-if="$store.getters['user/realmDesc']">
									{{ $store.getters['user/realmDesc'] }}
								</div>
							</div>
							
							<!-- 战力信息区域 -->
							<div class="combat-section">
								<div class="combat-power">{{ attributes.combatPower }}</div>
								<div class="combat-label">综合战力</div>
							</div>
						</div>

						<!-- 基础属性 -->
						<div class="attr-section">
							<h4>基础属性</h4>
							<div class="stats-grid">
								<div class="stat-item" v-for="stat in basicStatsList" :key="stat.key">
									<div class="stat-icon"><span class="icon-text">{{ stat.icon }}</span></div>
									<div class="stat-info">
										<span class="stat-name">{{ stat.name }}</span>
										<span class="stat-value">{{ stat.value }}</span>
									</div>
								</div>
							</div>
						</div>

						<!-- 进阶属性 -->
						<div class="attr-section">
							<h4>进阶属性</h4>
							<div class="stats-grid">
								<div class="stat-item" v-for="stat in advancedStatsList" :key="stat.key">
									<div class="stat-icon"><span class="icon-text">{{ stat.icon }}</span></div>
									<div class="stat-info">
										<span class="stat-name">{{ stat.name }}</span>
										<span class="stat-value">{{ stat.value }}</span>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				
				<!-- 人物信息按钮 -->
				<div class="character-info-btn" @click="showCharacterDetail">
					<span class="btn-text">查看详情</span>
				</div>
				<!-- 排行榜按钮 - 在查看详情下方 -->
				<div class="character-rank-btn" @click="navigateTo('/pages/rank/index')">
					<span class="btn-text">🏆 排行榜</span>
				</div>
				<!-- 设置齿轮按钮 -->
				<button class="settings-gear" @click="openSettingsModal">
					<span class="gear-icon">⚙️</span>
				</button>
				<!-- 背包按钮 - 在设置下方，文字展示 -->
				<button class="backpack-gear" @click="openInventoryModal">
					<span class="backpack-text">背包</span>
				</button>
				
				<!-- 设置弹窗 -->
				<SettingsModal :visible="showSettings" @close="showSettings=false" />
				
				<!-- 底部经验值区域 -->
				<UserLevelInfo />
			</div>
			
			<!-- 右侧功能菜单 -->
			<div class="right-menu">
				<div class="menu-item" @click="navigateTo('/pages/activity/index')">
					<div class="menu-icon quest">
						<span class="icon-text">任</span>
					</div>
					<span class="menu-label">任务</span>
				</div>
				<div class="menu-item" @click="navigateTo('/pages/partner/index')">
					<div class="menu-icon partner">
						<span class="icon-text">伙</span>
					</div>
					<span class="menu-label">伙伴</span>
				</div>
				<div class="menu-item" @click="navigateTo('/pages/partner/recruit')">
					<div class="menu-icon recruit">
						<span class="icon-text">募</span>
					</div>
					<span class="menu-label">招募</span>
				</div>
				<div class="menu-item" @click="openLineupConfig">
					<div class="menu-icon lineup">
						<span class="icon-text">阵</span>
					</div>
					<span class="menu-label">阵容</span>
				</div>
			</div>
		</div>
		
		<!-- 阵容配置弹框 -->
		<LineupConfigModal :visible="showLineupModal" @close="showLineupModal = false" />
		
		<!-- 使用全局CustomTabBar组件 -->
		<CustomTabBar />


		<!-- 背包模态框 -->
		<div class="inventory-modal-overlay" v-if="showInventoryModal" @click="closeInventoryModal">
			<div class="inventory-modal" @click.stop>
				<div class="modal-header">
					<h3 class="modal-title">背包</h3>
					<button class="modal-close" @click="closeInventoryModal">×</button>
				</div>
				<div class="modal-content">
					<div v-if="displayInventory.length === 0" class="empty-tip">背包空空如也</div>
					<div v-else class="inventory-list">
						<div class="inv-item" v-for="it in displayInventory" :key="it.id" @click="showItemDesc(it)">
							<span class="inv-name">{{ itemName(it.id) }}</span>
							<span class="inv-count">× {{ it.count }}</span>
							<button class="use-btn" @click.stop="useItem(it)">使用</button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import request from '../../src/api/request.js'
import { getAttributes } from '../../src/api/character.js'
import LineupConfigModal from '../../src/components/LineupConfigModal.vue'
import SettingsModal from '../../src/components/SettingsModal.vue'
import CustomTabBar from '../../src/components/CustomTabBar.vue'
import { redeemCdk, useItem as useSystemItem } from '../../src/api/system.js'
import UserAvatar from '../../src/components/UserAvatar.vue'
import UserLevelInfo from '../../src/components/UserLevelInfo.vue'
import { ITEM_ID, ITEM_NAME } from '../../src/config/items'

const ITEM_DESC_MAP = {
  [ITEM_ID.REFINED_IRON]: '用于装备改造，提升装备属性',
  [ITEM_ID.BLACK_IRON]: '用于高级改造，获得更强属性',
  [ITEM_ID.WASH_STONE]: '用于装备洗练，刷新属性',
  [ITEM_ID.SUPER_WASH_STONE]: '用于极品洗练，更高概率获得优质属性',
  [ITEM_ID.STRENGTHEN_STONE]: '用于装备强化，提升基础属性',
  [ITEM_ID.PERFECT_STRENGTHEN_STONE]: '用于完美强化，必定提升品质',
  [ITEM_ID.INVITE_LING]: '用于招募伙伴，在招募界面使用'
}

export default {
	components: { 
		UserAvatar, 
		UserLevelInfo,
		SettingsModal,
		CustomTabBar,
		LineupConfigModal
	},
	data() {
		return {
			userInfo: {},
			loading: false,
		showDetailPanel: false,
		showSettings: false,
		showLineupModal: false,
			showCdkInput: false,
			cdkCode: '',
			redeemLoading: false,
			showInventoryModal: false,
			musicEnabled: (typeof uni !== 'undefined' ? !!uni.getStorageSync('musicEnabled') : localStorage.getItem('musicEnabled') !== 'false'),
			
			attributes: {
				constitution: null,
				strength: null,
				agility: null,
				attack: null,
				defense: null,
				illusion: null,
				availableAffinityPoints: 0,
				health: null,
				defense: null,
				speed: null,
				baseDamage: null,
				damageIncrease: null,
				damageReduction: null,
				critRate: null,
				abnormalResist: null,
				controlSuccess: null,
				dodgeRate: null,
				hitRate: null,
				availablePoints: 0,
				combatPower: 0
			}
		}
	},
	
	computed: {
		displayInventory() {
			const list = this.$store.getters['items/inventoryList'] || []
			return list
		},
		
		basicStatsList() {
			return [
				{
					key: 'health',
					name: '生命值',
					icon: '❤️',
					value: this.attributes.health || 0
				},
				{
					key: 'defense',
					name: '防御',
					icon: '🛡️',
					value: this.attributes.defense || 0
				},
				{
					key: 'speed',
					name: '速度',
					icon: '⚡',
					value: this.attributes.speed || 0
				},
				{
					key: 'baseDamage',
					name: '基础伤害',
					icon: '⚔️',
					value: this.attributes.baseDamage || 0
				}
			]
		},
		
		advancedStatsList() {
			return [
				{
					key: 'damageIncrease',
					name: '增伤',
					icon: '🔥',
					value: this.attributes.damageIncrease || 0
				},
				{
					key: 'damageReduction',
					name: '减伤',
					icon: '🛡️',
					value: this.attributes.damageReduction || 0
				},
				{
					key: 'critRate',
					name: '暴击率',
					icon: '💥',
					value: this.attributes.critRate || 0
				},
				{
					key: 'abnormalResist',
					name: '抗异常',
					icon: '🧿',
					value: this.attributes.abnormalResist || 0
				},
				{
					key: 'controlSuccess',
					name: '控制成功率',
					icon: '🎯',
					value: this.attributes.controlSuccess || 0
				},
				{
					key: 'dodgeRate',
					name: '闪避率',
					icon: '💨',
					value: this.attributes.dodgeRate || 0
				},
				{
					key: 'hitRate',
					name: '命中率',
					icon: '🎯',
					value: this.attributes.hitRate || 0
				}
			]
		}
	},
	
	mounted() {
		if (this.isMainPage()) {
			this.checkLoginAndLoadRole()
		}
	},
	
	methods: {
		getEquipped(slot) {
			const getter = this.$store.getters['equipment/getEquippedItem']
			return getter ? getter(slot) : null
		},

		async checkLoginAndLoadRole() {
			const yid = (typeof uni !== 'undefined' ? uni.getStorageSync('yid') : localStorage.getItem('yid'))
			const roleId = (typeof uni !== 'undefined' ? uni.getStorageSync('role_id') : localStorage.getItem('role_id'))
			
			if (!yid) {
				window.location.hash = '/pages/login/index'
				return
			}
			
			if (!roleId) {
				window.location.hash = '/pages/role-select/index'
				return
			}
			
			await this.$store.dispatch('user/initHomeData')
		},
		
		async loadAttributeData() {
			try {
				const roleId = (typeof uni !== 'undefined' ? uni.getStorageSync('role_id') : localStorage.getItem('role_id'))
				if (!roleId) return
				
				const res = await getAttributes({ roleId })
				if (res.code === 1 && res.data) {
					const data = res.data
					
					if (data.attributes) {
						this.attributes = {
							constitution: data.attributes.constitution || 0,
							strength: data.attributes.strength || 0,
							agility: data.attributes.agility || 0,
							attack: data.attributes.attack || 0,
							defense: data.attributes.defense || 0,
							illusion: data.attributes.illusion || 0,
							availableAffinityPoints: data.attributes.availableAffinityPoints || 0,
							health: data.attributes.health || 0,
							defense: data.attributes.defense || 0,
							speed: data.attributes.speed || 0,
							baseDamage: data.attributes.baseDamage || 0,
							damageIncrease: data.attributes.damageIncrease || 0,
							damageReduction: data.attributes.damageReduction || 0,
							critRate: data.attributes.critRate || 0,
							abnormalResist: data.attributes.abnormalResist || 0,
							controlSuccess: data.attributes.controlSuccess || 0,
							dodgeRate: data.attributes.dodgeRate || 0,
							hitRate: data.attributes.hitRate || 0,
							availablePoints: data.attributes.availablePoints || 0,
							combatPower: data.attributes.combatPower || 0
						}
					}
					console.log('属性数据加载成功:', data)
				} else {
					console.error('加载属性数据失败:', res.message)
				}
			} catch (error) {
				console.error('加载属性数据失败:', error)
			}
		},
		
		async showCharacterDetail() {
			this.showDetailPanel = true
			await this.loadAttributeData()
		},
		
	openSettingsModal() {
		this.showSettings = true
	},
	
	openLineupConfig() {
		this.showLineupModal = true
	},

		handleAuthError() {
			if (typeof uni !== 'undefined') {
				uni.removeStorageSync('yid')
				uni.removeStorageSync('role_id')
			} else {
				localStorage.removeItem('yid')
				localStorage.removeItem('role_id')
			}
			
			window.location.hash = '/pages/login/index'
		},
		
		isMainPage() {
			return window.location.hash.includes('/pages/main/index')
		},
		
		navigateTo(url) {
			window.location.hash = url
		},

		openInventoryModal() {
			this.showInventoryModal = true
		},

		closeInventoryModal() {
			this.showInventoryModal = false
		},

		itemName(id) {
			return ITEM_NAME[id] || '未知物品'
		},

		showItemDesc(item) {
			const desc = ITEM_DESC_MAP[item.id] || '该物品暂无描述'
			uni.showToast({
				title: desc,
				icon: 'none'
			})
		},

		async useItem(item) {
			if (item.id === ITEM_ID.INVITE_LING) {
				this.navigateTo('/pages/partner/recruit')
				this.closeInventoryModal()
				return
			}
            
            const nonUsableItems = [
                ITEM_ID.REFINED_IRON,
                ITEM_ID.BLACK_IRON,
                ITEM_ID.WASH_STONE,
                ITEM_ID.SUPER_WASH_STONE,
                ITEM_ID.STRENGTHEN_STONE,
                ITEM_ID.PERFECT_STRENGTHEN_STONE,
            ];

            if (nonUsableItems.includes(item.id)) {
                uni.showToast({
                    title: '请在对应功能界面使用该物品',
                    icon: 'none',
                });
                return;
            }

			try {
				const res = await useSystemItem(item.id, 1)
				if (res.code === 1) {
					uni.showToast({
						title: '使用成功',
						icon: 'success'
					})
				}
			} catch (e) {
				console.error('useItem error', e)
			}
		},
		
		showComingSoon() {
			alert('功能即将开放')
		}
	}
}
</script>

<style scoped>
/* ========== 武侠风格主容器 ========== */
.main-container {
	min-height: 100vh;
	background: linear-gradient(180deg, #e8dcc4 0%, #d4c4a8 100%),
	            url('/static/images/dongxie.webp');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	padding: 8px 8px 80px;
	max-width: 100vw;
	overflow-x: hidden;
	box-sizing: border-box;
	font-family: "STSong", "Noto Serif SC", serif;
}

/* ========== 顶部用户信息栏 - 武侠风格 ========== */
.user-info-bar {
	display: flex;
	align-items: center;
	background: rgba(255, 255, 255, 0.95);
	border: 2px solid #c4a57b;
	border-radius: 12px;
	padding: 12px;
	margin-bottom: 12px;
	box-shadow: 0 4px 12px rgba(139, 111, 71, 0.3);
	box-sizing: border-box;
}

.user-details {
	flex: 1;
	margin-left: 12px;
}

.user-name {
	font-size: 16px;
	font-weight: bold;
	color: #4a3c2a;
	display: block;
	margin-bottom: 4px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.user-sect {
	font-size: 13px;
	color: #8b6f47;
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: 600;
}

/* 货币显示 - 武侠风格 */
.currency-display {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0 12px;
}

.currency-item {
	display: flex;
	align-items: center;
	gap: 6px;
	background: rgba(139, 111, 71, 0.1);
	padding: 4px 8px;
	border-radius: 12px;
}

.currency-icon {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 10px;
	font-weight: bold;
	color: white;
}

.currency-icon.coin1 {
	background: linear-gradient(135deg, #c0c0c0 0%, #e8e8e8 100%);
	box-shadow: 0 2px 4px rgba(192, 192, 192, 0.3);
}

.currency-icon.coin2 {
	background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
	box-shadow: 0 2px 4px rgba(255, 215, 0, 0.3);
}

.currency-value {
	font-size: 12px;
	font-weight: bold;
	color: #4a3c2a;
	min-width: 40px;
}

.user-level {
	text-align: right;
}

.level-text {
	font-size: 15px;
	font-weight: bold;
	color: #8b6f47;
	display: block;
	margin-bottom: 3px;
}

.realm-text {
	font-size: 12px;
	color: #6b4f3b;
	display: block;
	font-weight: 600;
}

/* ========== 主游戏区域 ========== */
.main-game-area {
	display: flex;
	height: calc(100vh - 180px);
	gap: 12px;
}

/* ========== 左右侧菜单 - 武侠风格 ========== */
.left-menu, .right-menu {
	width: 72px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 12px 0;
}

.menu-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 6px 4px;
	transition: all 0.3s;
	cursor: pointer;
	background: rgba(255, 255, 255, 0.8);
	border: 2px solid #d8c7a3;
	border-radius: 10px;
}

.menu-item:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(139, 111, 71, 0.3);
	border-color: #8b6f47;
}

.menu-item:active {
	transform: scale(0.95);
}

.menu-icon {
	width: 44px;
	height: 44px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 5px;
	box-shadow: 0 3px 10px rgba(139, 111, 71, 0.25);
	flex-shrink: 0;
}

/* 武侠主题色系 */
.menu-icon.battle {
	background: linear-gradient(135deg, #c94a3f 0%, #a83931 100%);
}

.menu-icon.attr {
	background: linear-gradient(135deg, #8b6f47 0%, #6b4f3b 100%);
}

.menu-icon.martial {
	background: linear-gradient(135deg, #9b7653 0%, #7b5e42 100%);
}

.menu-icon.forge {
	background: linear-gradient(135deg, #6b8e67 0%, #5a7a56 100%);
}

.menu-icon.sect {
	background: linear-gradient(135deg, #b8860b 0%, #8b6914 100%);
}

.menu-icon.quest {
	background: linear-gradient(135deg, #cd853f 0%, #a0682f 100%);
}

.menu-icon.partner {
	background: linear-gradient(135deg, #5a8aa0 0%, #4a7088 100%);
}

.menu-icon.recruit {
	background: linear-gradient(135deg, #6b8e67 0%, #5a7a56 100%);
}

.menu-icon.lineup {
	background: linear-gradient(135deg, #9370db 0%, #7a58c1 100%);
}

.menu-icon.market {
	background: linear-gradient(135deg, #8b8378 0%, #6b6358 100%);
}

.menu-icon.pvp {
	background: linear-gradient(135deg, #d4af37 0%, #b8951f 100%);
}

.icon-text {
	font-size: 16px;
	font-weight: bold;
	color: #ffffff;
	line-height: 1;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.menu-label {
	font-size: 11px;
	color: #4a3c2a;
	text-align: center;
	line-height: 1.2;
	font-weight: 600;
}

/* ========== 中央人物展示区域 - 武侠风格 ========== */
.character-display {
	flex: 1;
	display: flex;
	flex-direction: column;
	position: relative;
	background: rgba(255, 255, 255, 0.5);
	border: 3px solid #c4a57b;
	border-radius: 15px;
	overflow: hidden;
	box-shadow: 0 6px 20px rgba(139, 111, 71, 0.4);
}

.character-background {
	flex: 1;
	background: url('/static/images/dongxie.webp') center/contain no-repeat;
	margin-bottom: 12px;
	min-height: 300px;
}

.character-info-btn {
	position: absolute;
	top: 15px;
	right: 15px;
	background: linear-gradient(135deg, #8b6f47 0%, #6b4f3b 100%);
	color: white;
	padding: 8px 16px;
	border-radius: 20px;
	cursor: pointer;
	font-size: 12px;
	font-weight: bold;
	transition: all 0.3s ease;
	box-shadow: 0 3px 10px rgba(75, 58, 42, 0.3);
	border: 2px solid #4b3a2a;
}

.character-info-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 5px 15px rgba(75, 58, 42, 0.4);
}

.character-rank-btn {
	position: absolute;
	top: 55px; /* 在查看详情下方 */
	right: 15px;
	background: linear-gradient(135deg, #d4af37 0%, #c9a035 100%);
	color: white;
	padding: 8px 14px;
	border-radius: 20px;
	cursor: pointer;
	font-size: 12px;
	font-weight: bold;
	transition: all 0.3s ease;
	box-shadow: 0 3px 10px rgba(212, 175, 55, 0.3);
	border: 2px solid #b8963f;
}

.character-rank-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 5px 15px rgba(212, 175, 55, 0.4);
}

.settings-gear {
	position: absolute;
	top: 15px;
	left: 15px;
	width: 36px;
	height: 36px;
	border: 2px solid #4b3a2a;
	border-radius: 50%;
	background: linear-gradient(135deg, #8b6f47 0%, #6b4f3b 100%);
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 3px 10px rgba(75, 58, 42, 0.3);
	transition: all 0.3s ease;
}

.settings-gear:hover {
	transform: scale(1.1);
	box-shadow: 0 5px 15px rgba(75, 58, 42, 0.4);
}

.backpack-gear {
	position: absolute;
	top: 60px; /* 在设置下方 */
	left: 15px;
	border: 2px solid #4b3a2a;
	border-radius: 10px;
	padding: 6px 14px;
	background: linear-gradient(135deg, #8b6f47 0%, #6b4f3b 100%);
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 3px 10px rgba(75, 58, 42, 0.3);
	transition: all 0.3s ease;
}

.backpack-gear:hover {
	transform: translateY(-2px);
	box-shadow: 0 5px 15px rgba(75, 58, 42, 0.4);
}

.backpack-text {
	color: white;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.5px;
}

.gear-icon { 
	font-size: 18px; 
}

/* ========== 人物详细信息面板 - 武侠风格 ========== */
.character-detail-panel {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 90%;
	max-width: 450px;
	max-height: 85vh;
	background: rgba(248, 246, 241, 0.98);
	border: 3px solid #8b6f47;
	border-radius: 15px;
	box-shadow: 0 10px 40px rgba(139, 111, 71, 0.5);
	z-index: 2000;
	overflow: hidden;
}

.panel-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 15px 20px;
	background: linear-gradient(135deg, #8b6f47 0%, #6b4f3b 100%);
	color: white;
	border-bottom: 3px solid #4b3a2a;
}

.panel-header h3 {
	margin: 0;
	font-size: 18px;
	font-weight: bold;
	letter-spacing: 1px;
}

.close-btn {
	background: rgba(255, 255, 255, 0.2);
	border: 2px solid rgba(255, 255, 255, 0.3);
	color: white;
	font-size: 22px;
	cursor: pointer;
	padding: 0;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	transition: all 0.3s ease;
}

.close-btn:hover {
	background: rgba(255, 255, 255, 0.3);
	border-color: rgba(255, 255, 255, 0.5);
}

.panel-content {
	padding: 20px;
	max-height: calc(85vh - 80px);
	overflow-y: auto;
	background: rgba(255, 255, 255, 0.5);
}

/* 基本信息 - 武侠风格 */
.basic-info {
	display: flex;
	flex-direction: column;
	gap: 15px;
	background: rgba(255, 255, 255, 0.9);
	border-radius: 12px;
	padding: 18px;
	margin-bottom: 18px;
	border: 2px solid #d8c7a3;
	box-shadow: 0 3px 10px rgba(139, 111, 71, 0.15);
}

.level-realm-section {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.basic-info .user-level {
	text-align: left;
	display: flex;
	align-items: baseline;
	gap: 12px;
}

.basic-info .level-text {
	font-size: 19px;
	font-weight: bold;
	color: #4a3c2a;
	display: inline-block;
}

.basic-info .realm-text {
	font-size: 16px;
	color: #6b4f3b;
	font-weight: 600;
	display: inline-block;
}

.realm-desc {
	font-size: 13px;
	color: #6b4f3b;
	line-height: 1.6;
	padding: 10px 12px;
	background: rgba(139, 111, 71, 0.08);
	border-radius: 8px;
	border-left: 3px solid #8b6f47;
	font-style: italic;
}

.combat-section {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 15px;
	background: linear-gradient(135deg, rgba(139, 111, 71, 0.1) 0%, rgba(139, 111, 71, 0.05) 100%);
	border-radius: 10px;
	border: 2px solid #c4a57b;
}

.combat-power {
	font-size: 22px;
	font-weight: bold;
	color: #8b6f47;
	text-shadow: 0 1px 2px rgba(139, 111, 71, 0.2);
}

.combat-label {
	font-size: 12px;
	color: #6b4f3b;
	font-weight: 600;
	letter-spacing: 0.5px;
}

.attr-section {
	margin-bottom: 20px;
}

.attr-section h4 {
	margin: 0 0 12px 0;
	font-size: 16px;
	color: #4a3c2a;
	border-bottom: 2px solid #c4a57b;
	padding-bottom: 6px;
	font-weight: bold;
}

.stats-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}

.stat-item {
	display: flex;
	align-items: center;
	padding: 10px;
	background: rgba(248, 246, 241, 0.8);
	border-radius: 8px;
	border: 1px solid #d8c7a3;
	transition: all 0.3s ease;
}

.stat-item:hover {
	background: rgba(255, 255, 255, 0.9);
	transform: translateY(-1px);
	box-shadow: 0 2px 8px rgba(139, 111, 71, 0.2);
}

.stat-icon {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: linear-gradient(135deg, #8b6f47 0%, #6b4f3b 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 10px;
	flex-shrink: 0;
}

.stat-icon .icon-text {
	font-size: 12px;
}

.stat-info {
	flex: 1;
}

.stat-name {
	font-size: 12px;
	color: #8b6f47;
	display: block;
	margin-bottom: 2px;
	font-weight: 600;
}

.stat-value {
	font-size: 14px;
	font-weight: bold;
	color: #4a3c2a;
}

/* ========== 背包按钮与模态 - 武侠风格 ========== */
.inventory-modal-overlay {
	position: fixed;
	top: 0; left: 0; right: 0; bottom: 0;
	background: rgba(75, 58, 42, 0.6);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2500;
	backdrop-filter: blur(4px);
}

.inventory-modal {
	width: 90%;
	max-width: 420px;
	max-height: 70vh;
	background: rgba(248, 246, 241, 0.98);
	border: 3px solid #8b6f47;
	border-radius: 15px;
	box-shadow: 0 12px 40px rgba(139, 111, 71, 0.5);
	overflow: hidden;
}

.inventory-modal .modal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 16px;
	background: linear-gradient(135deg, #8b6f47 0%, #6b4f3b 100%);
	color: #fff;
	border-bottom: 3px solid #4b3a2a;
}

.inventory-modal .modal-title { 
	font-weight: bold; 
	letter-spacing: 1px;
}

.inventory-modal .modal-close {
	background: rgba(255, 255, 255, 0.2);
	border: 2px solid rgba(255, 255, 255, 0.3);
	color: #fff;
	font-size: 22px;
	cursor: pointer;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.inventory-modal .modal-close:hover {
	background: rgba(255, 255, 255, 0.3);
}

.inventory-modal .modal-content { 
	padding: 12px 16px; 
	background: rgba(255, 255, 255, 0.5);
}

.inventory-list { 
	display: flex; 
	flex-direction: column; 
	gap: 10px; 
}

.inv-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 12px;
	background: rgba(255, 255, 255, 0.9);
	border: 1px solid #d8c7a3;
	border-radius: 8px;
	transition: all 0.3s ease;
}

.inv-item:hover {
	background: rgba(255, 255, 255, 1);
	border-color: #8b6f47;
	transform: translateX(2px);
}

.inv-name { 
	font-size: 14px; 
	color: #4a3c2a; 
	font-weight: 600; 
}

.inv-count { 
	font-size: 14px; 
	color: #8b6f47; 
	font-weight: 600;
}

.use-btn {
	padding: 6px 12px;
	border: 2px solid #4b3a2a;
	border-radius: 8px;
	background: linear-gradient(135deg, #8b6f47 0%, #6b4f3b 100%);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.3s ease;
}

.use-btn:hover {
	transform: translateY(-1px);
	box-shadow: 0 2px 8px rgba(75, 58, 42, 0.3);
}

.empty-tip { 
	text-align: center; 
	color: #6b4f3b; 
	font-size: 14px; 
	padding: 30px 0; 
	font-weight: 600;
}

/* ========== 响应式设计 ========== */
@media (max-width: 768px) {
	.main-game-area {
		flex-direction: column;
		height: auto;
	}
	
	.left-menu, .right-menu {
		width: 100%;
		flex-direction: row;
		justify-content: space-around;
		padding: 10px 0;
	}
	
	.character-display {
		order: -1;
		margin-bottom: 12px;
	}
	
	.character-background {
		min-height: 220px;
	}
}

@media (max-width: 480px) {
	.main-container {
		padding: 6px 6px 80px;
	}
	
	.user-info-bar {
		padding: 10px;
		margin-bottom: 10px;
		border-radius: 10px;
	}
	
	.user-name {
		font-size: 15px;
	}
	
	.user-sect {
		font-size: 12px;
	}
	
	.currency-value {
		font-size: 11px;
	}
	
	.menu-icon {
		width: 40px;
		height: 40px;
	}
	
	.menu-label {
		font-size: 10px;
	}
	
	.stats-grid {
		grid-template-columns: 1fr;
	}
	
	.character-detail-panel {
		width: 95%;
		max-width: none;
	}
}
</style>
